import React from 'react'
import {withRouter} from 'react-router-dom'
import './MyZans.css'
import {connect,} from 'react-redux'
import LocalStorageService from "../../../utils/LocalStorageService";
import _ from 'lodash'
import ScrollList from "../../../shared-components/ScrollList/ScrollList";
import TwoPageTabs from "../TwoPageTabs/TwoPageTabs";
import ZanItem from "../ZanItem/ZanItem";

class MyZans extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.state = {
            p: [0, 0,],
            height: document.documentElement.clientHeight - 90,
            tabs: [
                {title: '话题的赞', active: true,},
                {title: '视频的赞', active: false,}
            ],
        }
    }

    componentDidMount() {
        this.get(0)
    }

    get = (index) => {
        const uid = this.uid
        const p = Number(this.state.p[index])
        const zan = 1
        if (index === 0) {
            this.props.doGetMyZan({uid, p, zan})
        } else if (index === 1) {
            this.props.doGetMyZanVod({uid, p, zan})
        }

    }

    onTabClick = (index) => {
        const tabs = this.state.tabs
        if (index === 0) {
            tabs[0].active = true
            tabs[1].active = false
        } else {
            tabs[0].active = false
            tabs[1].active = true
            const myVodZans = this.props.topic.myVodZans

            if (Object.keys(myVodZans.lists).length === 0) {
                this.get(1)
            }
        }
        this.setState({
            tabs,
        })
    }


    render() {
        const myZans = this.props.topic.myZans
        const myVodZans = this.props.topic.myVodZans
        const end = myZans.end
        const vodEnd = myVodZans.end
        const lists = myZans.lists
        const vodLists = myVodZans.lists
        const zansList = []
        const vodZansList = []
        const ps = Object.keys(lists)
        const psVod = Object.keys(vodLists)
        ps.map(p => zansList.push(...lists[p]))
        psVod.map(p => vodZansList.push(...vodLists[p]))


        const tabsState = this.state.tabs

        const tabs = <TwoPageTabs tabsState={tabsState} onTabClick={this.onTabClick}/>

        const zanTemplate = <ScrollList
            endCondition={end}
            ctnStyle={{
                height: this.state.height,
                overflowY: 'scroll',
            }}
            gap={50}
            endHeight={200}
            scrollCallback={() => {
                this.setState({
                    p: [this.state.p[0] + 1, this.state.p[1],]
                }, () => this.get(0))
            }}
        >
            {zansList.map((zan, index) => <ZanItem zanType='topic' key={index} zan={zan} formatDate={this.props.formatDate}/>)}
        </ScrollList>


        const vodZanTemplate = <ScrollList
            endCondition={vodEnd}
            ctnStyle={{
                height: this.state.height,
                overflowY: 'scroll',
            }}
            gap={50}
            endHeight={200}
            scrollCallback={() => {
                this.setState({
                    p: [this.state.p[0], this.state.p[1] + 1,]
                }, () => this.get(1))
            }}
        >
            {vodZansList.map((zan, index) => <ZanItem type='vod' key={index} zan={zan} formatDate={this.props.formatDate}/>)}
        </ScrollList>

        const topicActive = this.state.tabs[0].active
        const vodActive = this.state.tabs[1].active

        return <div style={{position: 'relative,'}}>
            {tabs}
            <div style={{
                display: topicActive ? '' : 'none',
            }}>
                {zanTemplate}
            </div>

            <div style={{
                display: vodActive ? '' : 'none',
            }}>
                {vodZanTemplate}
            </div>

        </div>

        return <ScrollList
            endCondition={end}
            ctnStyle={{
                height: this.state.height,
                overflowY: 'scroll',
            }}
            gap={50}
            endHeight={200}
            scrollCallback={() => {
                this.setState({
                    p: [this.state.p[0] + 1, this.state.p[1],]
                }, () => this.get(0))
            }}
        >
            {/*{list}*/}
        </ScrollList>

    }
}

const mapState = state => ({
    topic: state.topic,
})

const mapDispatch = dispatch => ({
    doGetMyZan: payload => dispatch.topic.doGetMyZan(payload),
    doGetMyZanVod: payload => dispatch.topic.doGetMyZanVod(payload),
})

export default connect(mapState, mapDispatch)(withRouter(MyZans))
